<template>
  <div v-loading="loading">
    <div class="team-list-box">
      <!-- 组别表单 -->
      <div class="serv-table serv-table-head">
        <div class="serv-table-td">组别名称</div>
        <div class="serv-table-td">总人数</div>
        <div class="serv-table-td">类型</div>
        <div class="serv-table-td">是否收费</div>
        <div class="serv-table-td">操作</div>
      </div>
      <el-form :disabled="!is_edit? true : false" v-if="loading == false && team_list.length > 0">
        <div v-for="(item,key) in team_list" :key="key" class="serv-table-body">
          <div class="serv-table">
            <div class="serv-table-td">
              <el-input type="text" placeholder="请输入组别名称" v-model="item.name" size="mini" :disabled="type == 1 ? false : true"></el-input>
            </div>
            <div class="serv-table-td">
              <el-input
                type="number"
                placeholder="请输入组别总人数"
                v-model="item.total_people"
                size="mini"
              >
                <template slot="append">人</template>
              </el-input>
            </div>
            <div class="serv-table-td">
              <div class="group-type-name" v-if="item.form.length == 1" size="small">个人</div>
              <div
                class="group-type-name group-type-team"
                v-if="item.form.length > 1"
                size="small"
              >组队</div>
            </div>
            <div class="serv-table-td">
              <el-switch
                v-model="item.is_pay"
                :disabled="cation > 0 ? false : true"
                active-color="#8a70c6"
                inactive-color="#e1e1e1"
                style="margin-top:7px;"
                @change="changePay(key)"
              ></el-switch>
            </div>
            <div class="serv-table-td">
              <el-tooltip class="item" effect="dark" content="收费信息" placement="top-start">
                <span class="ser-btns" @click="editServ(key,0)">
                  <i class="el-icon-edit-outline"></i>
                </span>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="type == 1 ? '组别信息' :'报名信息'"
                placement="top-start"
              >
                <span class="ser-btns" @click="editServ(key,1)">
                  <i class="el-icon-document"></i>
                </span>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top-start"
                v-if="type == 1"
              >
                <el-button size="mini" circle icon="el-icon-delete" @click="deleteService(key)"></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="serv-table-tags-box" v-if="set_index == key">
            <div
              class="serv-table-tags"
              :style="'margin-right:calc(20% - '+(34 + (set_btn * 28) +(set_btn * 10))+'px)'"
            ></div>
          </div>
          <div class="serv-table-memo" v-if="set_index == key && set_btn == 0">
            <el-form
              size="small"
              label-width="80px"
              label-position="left"
              :disabled="!is_edit? true : false"
            >
              <el-form-item label="价格设置" v-if="item.is_pay">
                <el-input
                  :placeholder="type != 3 ? '请输入标准价' : '请输入价格'"
                  style="width:300px"
                  v-model="item.normal_price"
                  type="number"
                  @input="inputNormalPrice($event,key)"
                >
                  <template slot="append">元</template>
                  <template slot="prepend">{{type != 3 ? '标准价' : '价格'}}</template>
                </el-input>
                <el-input
                  placeholder="请输入高级会员价"
                  style="width:300px;margin-left:10px;"
                  v-model="item.vip_price"
                  type="number"
                  v-if="type != 3"
                >
                  <template slot="prepend">高级会员价</template>
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="早鸟开关" v-if="item.is_pay && type == 1">
                <el-switch
                  v-model="item.is_shift"
                  active-color="#8a70c6"
                  inactive-color="#e1e1e1"
                  @change="changeShift(key)"
                ></el-switch>
                <div v-if="item.is_shift">
                  <el-input
                    placeholder="请输入早鸟价"
                    style="width:200px;margin-right:10px;"
                    v-model="item.shift_price"
                    type="number"
                  >
                    <template slot="append">元</template>
                  </el-input>
                  <el-date-picker
                    type="datetime"
                    placeholder="选择早鸟截止时间"
                    size="small"
                    v-model="item.shift_time"
                    value-format="timestamp"
                    @change="changeShiftTime($event,key)"
                  ></el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="报名审核" v-if="type == 1">
                <el-switch
                  v-model="item.is_verify"
                  active-color="#8a70c6"
                  inactive-color="#e1e1e1"
                  @change="changeVerify(key)"
                ></el-switch>
              </el-form-item>
              <el-form-item
                label="代报名"
                v-if="!item.is_verify && item.form.length == 1 && type == 1"
              >
                <el-switch
                  v-model="item.is_replace"
                  active-color="#8a70c6"
                  inactive-color="#e1e1e1"
                ></el-switch>
              </el-form-item>
            </el-form>
          </div>
          <div class="serv-table-memo group-tabs-box" v-if="set_index == key && set_btn == 1">
            <el-tabs v-model="form_index" @tab-click="handleClick">
              <el-tab-pane v-for="(items,keys) in item.form" :key="keys" :name="keys.toString()">
                <span slot="label" v-if="team_list[set_index].form.length > 1">
                  {{'报名人'+ numToStr(keys + 1)}}
                  <i
                    class="el-icon-close"
                    v-if="keys > 1 && is_edit"
                    @click.stop="deleteGroupForm(key,keys)"
                  ></i>
                </span>
                <span slot="label" v-if="team_list[set_index].form.length == 1">报名字段</span>
                <div style="background:#fff;padding:10px;">
                  <div v-if="team_list[set_index].form.length > 1">
                    <span style="margin-right:10px;font-size:12px">是否必填</span>
                    <el-switch
                      v-model="items.not_null"
                      active-color="#8a70c6"
                      inactive-color="#e1e1e1"
                      :disabled="keys < 2 ? true : false"
                    ></el-switch>
                  </div>
                  <!-- 报名表单 -->
                  <div style="margin-top:10px;">
                    <group-form
                      :form_data="items.data"
                      :is_edit="is_edit"
                      @change="changeForms"
                      @update="changeLimit"
                      @sort="sortForm"
                      @notnull="changNull"
                    ></group-form>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <div
              class="com-btn add-group"
              @click="addGroupForms(key)"
              v-if="item.form.length > 1 && is_edit"
            >
              <i class="el-icon-plus"></i>
              <span>添加报名人</span>
            </div>
          </div>
        </div>
      </el-form>
      <div class="serv-empty" v-if="loading == false && team_list.length == 0">暂无组别信息</div>
      <div v-if="is_edit && type == 1" style="margin-top:20px;">
        <el-button icon="el-icon-plus" size="small" class="com-btn" @click="addPersonGroup(1)">添加单人组</el-button>
        <el-button icon="el-icon-plus" size="small" class="com-btn" @click="addPersonGroup(2)">添加多人组</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import addPerson from "./team/add-person.vue";
import signForm from "./team/sign-form.vue";
import groupForm from "../../../components/unit/set-form.vue";

export default {
  components: { addPerson, signForm, groupForm },
  props: { active_id: {}, is_edit: {}, type: {} ,base:{}},
  data() {
    return {
      team_list: [],
      form_temp: [],
      loading: false,
      set_index: 0,
      set_btn: 0,
      form_index: "0",
      cation: window.localStorage.getItem("cation")
    };
  },
  mounted() {
    if (this.type != 1) {
      this.team_list.push({
        name: "默认 ", //组别名称
        is_pay: this.cation > 0 ? true : false, //是否开启收费
        is_replace: false, //是否允许代报名
        is_shift: false, //是否开启早鸟
        is_verify: false, //是否开启审核
        normal_price: "", //标准价
        vip_price: "", //会员价
        shift_price: "", //早鸟价
        total_people: "", //总人数
        shift_time: "", //早鸟时间
        form: [
          {
            data: [
              {
                name: "姓名",
                is_diy: false,
                not_null: true,
                limit: false,
                select: false,
                type: "text",
                data: [],
                is_diy: false,
                bind: false
              },
              {
                name: "手机号",
                is_diy: false,
                not_null: true,
                limit: false,
                select: false,
                type: "number",
                data: [],
                is_diy: false,
                bind: false
              }
            ],
            not_null: true
          }
        ] //报名表单
      });
    }
    this.set_btn = this.cation > 0 ? 0 : 1;
    if (this.active_id > 0) this.getData();
  },
  methods: {
    //改变早鸟时间
    changeShiftTime(e,key){
      console.log(this.team_list[key].shift_time);
      console.log(this.base.enter_time[1]);
      if(e > this.base.enter_time[1]){
        this.team_list[key].shift_time = '';
        return this.toast(0,'早鸟时间不能大于报名结束时间');
      }
      if(e < this.base.enter_time[0]){
        this.team_list[key].shift_time = '';
        return this.toast(0,'早鸟时间不能小于报名开始时间');
      }
    },
    //任务输入价格
    inputNormalPrice(e,key){
      if(this.type == 3) {
        this.team_list[key].vip_price = e;
      }
    },
    //多人组别切换报名表单
    handleClick() {
      var data = JSON.parse(
        JSON.stringify(
          this.team_list[this.set_index].form[this.form_index].data
        )
      );
      setTimeout(() => {
        this.team_list[this.set_index].form[this.form_index].data = data;
      });
      this.$forceUpdate();
    },
    //删除多人组别报名人
    deleteGroupForm(key, keys) {
      //console.log(this.team_list[key]);
      var len = this.team_list[key].form.length;
      this.form_index = (len - 2).toString();
      this.team_list[key].form.splice(keys, 1);

      this.$forceUpdate();
    },
    //添加多人组别报名人
    addGroupForms(key) {
      var item = JSON.parse(JSON.stringify(this.team_list[key].form[0]));
      this.team_list[key].form.push(item);
      var len = this.team_list[key].form.length;
      this.form_index = (len - 1).toString();
      console.log(this.team_list);
      this.$forceUpdate();
    },
    //改变性别、时间日期的回调
    changeLimit(e) {
      this.team_list[this.set_index].form[this.form_index].data = e;
    },
    //form数据变化回调
    changeForms(e) {
      var form_len = this.team_list[this.set_index].form.length;
      if (form_len > 1) {
        var data = this.team_list[this.set_index].form[this.form_index].data;
        var temp_data = JSON.parse(
          JSON.stringify(this.team_list[this.set_index].form[1].data)
        );
        if (e.length > temp_data.length) {
          //如果是新增报名项
          for (var i in this.team_list[this.set_index].form) {
            for (var x = temp_data.length; x < e.length; x++) {
              this.team_list[this.set_index].form[i].data[x] = e[x];
              this.team_list[this.set_index].form[i].data.splice(x, 1, e[x]);
            }
          }
        } else if (e.length < temp_data.length) {
          //删除报名项
          var len_len = temp_data.length - e.length; //获取删除的项长度
          for (var i in this.team_list[this.set_index].form) {
            //获取被删除的下标
            var index = this.getDeleteIndex(
              this.team_list[this.set_index].form[i].data,
              e
            );
            this.team_list[this.set_index].form[i].data.splice(index, len_len);
          }
        }
      } else {
        if (e.length == this.team_list[this.set_index].form[0].data.length)
          return false;
        for (var i in e) {
          this.team_list[this.set_index].form[0].data[i] = e[i];
        }
      }
    },
    //获取删除的下标
    getDeleteIndex(e, v) {
      for (var i in e) {
        if (!this.checkInArr(e[i].name, v)) return i;
      }
      return -1;
    },
    //检测是否在数组中
    checkInArr(str, arr) {
      for (var i in arr) {
        if (arr[i].name == str) return true;
      }
      return false;
    },
    //改变必填
    changNull(e) {
      for (var i in this.team_list[this.set_index].form) {
        this.team_list[this.set_index].form[i].data[e.key].not_null = e.data;
        this.$forceUpdate();
      }
      console.log(this.team_list[this.set_index].form);
    },
    //排序回调
    sortForm(e) {
      var old_index = e.old_index + 2;
      var new_index = e.new_index + 2;
      var temp = JSON.parse(
        JSON.stringify(
          this.team_list[this.set_index].form[this.form_index].data[new_index]
        )
      );
      var temp1 = JSON.parse(
        JSON.stringify(
          this.team_list[this.set_index].form[this.form_index].data[old_index]
        )
      );
      for (var i in this.team_list[this.set_index].form) {
        var temp_arr = [];
        for (var x in this.team_list[this.set_index].form[i].data) {
          if (new_index < old_index) {
            //向上排序
            if (x == new_index) {
              temp_arr[x] = temp1;
            }
            if (x == old_index) continue;
          } else {
            //向下排序
            if (x == old_index) {
              temp_arr[x] = temp;
            }
            if (x == new_index) continue;
          }
          temp_arr.push(this.team_list[this.set_index].form[i].data[x]);
        }
        this.team_list[this.set_index].form[i].data = temp_arr;
        this.$forceUpdate();
      }
      //console.log(e);
    },
    //切换
    editServ(key, index) {
      if (this.set_index == key && this.set_btn == index) {
        return (this.set_index = -1);
      }
      this.set_index = key;
      this.set_btn = index;
      this.form_index = 0;
      this.$forceUpdate();
    },
    //删除组别
    deleteService(key) {
      var name = this.team_list[key].name;
      if (name == "") name = "未命名组别";
      this.$confirm("确定删除组别【" + name + "】?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.team_list.splice(key, 1);
          if (key == this.set_index) {
            this.set_index = -1;
          }
        })
        .catch(() => {});
    },
    //添加组别
    addPersonGroup(len) {
      var form = [];
      for (var i = 0; i < len; i++) {
        form.push({
          data: [
            {
              name: "姓名",
              is_diy: false,
              not_null: true,
              limit: false,
              select: false,
              type: "text",
              data: [],
              is_diy: false,
              bind: false
            },
            {
              name: "手机号",
              is_diy: false,
              not_null: true,
              limit: false,
              select: false,
              type: "number",
              data: [],
              is_diy: false,
              bind: false
            }
          ],
          not_null: true
        });
      }
      var item = {
        name: "", //组别名称
        is_pay: true, //是否开启收费
        is_replace: false, //是否允许代报名
        is_shift: false, //是否开启早鸟
        is_verify: false, //是否开启审核
        normal_price: "", //标准价
        vip_price: "", //会员价
        shift_price: "", //早鸟价
        total_people: "", //总人数
        shift_time: "", //早鸟时间
        form: form //报名表单
      };
      this.team_list.push(item);
      var team_len = this.team_list.length;
      this.set_index = team_len - 1;
      this.set_btn = 0;
      this.$forceUpdate();
    },
    //设置审核
    changeVerify(key) {
      this.team_list[key].is_replace = false;
    },
    //设置收费
    changePay(key) {
      this.team_list[key].is_shift = false;
      this.team_list[key].shift_price = "";
      this.team_list[key].shift_time = "";
      this.team_list[key].vip_price = "";
      this.team_list[key].normal_price = "";
    },
    //设置早鸟价
    changeShift(key) {
      this.team_list[key].shift_price = "";
      this.team_list[key].shift_time = "";
    },
    //删除组别
    deleteGroup(key) {
      this.team_list.splice(key, 1);
    },
    //设置表格每行颜色
    tableRowClassName({ row, rowIndex }) {
      return "el-table-head";
    },
    /**
     * 获取信息
     */
    getData() {
      this.loading = true;
      this.ajaxs("active/getTeamInfo", {
        data: { active_id: this.active_id },
        success: res => {
          this.team_list = res.msg;
          console.log(this.team_list);
          this.loading = false;
        }
      });
    },
    /**
     * 强制更新页面
     */
    updateInfo() {
      this.$forceUpdate();
      this.$emit("change", this.team_list);
    },
    //数字转中文
    numToStr(num) {
      var str = "";
      switch (num) {
        case 0:
          str = "零";
          break;
        case 1:
          str = "一";
          break;
        case 2:
          str = "二";
          break;
        case 3:
          str = "三";
          break;
        case 4:
          str = "四";
          break;
        case 5:
          str = "五";
          break;
        case 6:
          str = "六";
          break;
        case 7:
          str = "七";
          break;
        case 8:
          str = "八";
          break;
        case 9:
          str = "九";
          break;
      }
      return str;
    }
  },
  watch: {
    team_list: {
      handler(v, o) {
        for (var i in this.team_list) {
          if (this.team_list[i].total_people < 0)this.team_list[i].total_people = '';
          if (this.team_list[i].normal_price < 0)this.team_list[i].normal_price = 0.1;
          if (this.team_list[i].vip_price < 0)this.team_list[i].vip_price = 0.1;
          if (this.team_list[i].shift_price < 0)this.team_list[i].shift_price = 0.1;
        }
        this.$emit("change", this.team_list);
      },
      deep: true
    }
  }
};
</script>

<style>
@import url("../../../assets/css/active/group.css");
</style>